<template>
  <div class="play-page-footer">
    <div class="progress">
      <input
        type="range"
        v-model="value"
        :min="0"
        :max="duration"
        @input="inputing = true"
        @change="
          inputing = false;
          $emit('update:currentTime', value);
        "
      />
      <div class="bg">
        <div
          class="bar"
          :style="{ width: `${(value / duration) * 100}%` }"
        ></div>
      </div>
    </div>
    <!-- @audio-play-handler="$emit('audio-play-handler')" -->
    <!-- @audio-pause-handler="$emit('audio-pause-handler')" -->
    <button @click="$emit('prev-song')">上</button>

    <button v-if="!playing" @click="$emit('audio-play-handler')">▶</button>
    <button v-else @click="$emit('audio-pause-handler')">⏸</button>
    <button @click="$emit('next-song')">下</button>
    <button @click="$parent.$parent.showMyPlayList = true">列表</button>
  </div>
</template>

<script>
export default {
  props: {
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  data: function () {
    return {
      inputing: false,
      value: this.currentTime,
    };
  },
  watch: {
    currentTime: function (n) {
      if (!this.inputing) {
        this.value = n;
      }
    },
  },
};
</script>

<style lang="less">
.play-page-footer {
  .progress {
    position: relative;
    height: 20px;
    input {
      width: 100%;
      height: 20px;
      opacity: 0;
    }
    .bg {
      width: 100%;
      height: 5px;
      background: rgba(255, 255, 255, 0.15);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      .bar {
        width: 10%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        position: relative;

        &::before {
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          width: 5px;
          height: 100%;
          background: rgba(255, 255, 255, 1);
          margin-right: -5px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>